// 预约挂号
import React, {useEffect,useState} from 'react'
import { Button,  Card, Table, Pagination, message, Radio, Divider, Input } from "antd";
import {useHistory} from "react-router-dom";
import {getDataList,getDataByName} from "../service"
const { Search } = Input;
function Registration(){
  const history = useHistory();
  const pageSize = 10;
  const [dataSoucre,setDataSource] = useState([]);
  const [count,setCount] = useState(0);
  const [page,setPage]= useState(0);
  const [selectionType,setSelectionType] = useState('all')
  // 表头信息
  const columns = [
    {
      title:'id',
      dataIndex: 'r_id',
      width:1
    },
    {
      title:'患者姓名',
      dataIndex: 'p_name',
      width:1
    },
    {
      title:'就诊卡号',
      dataIndex: 'p_pcard',
      width:1
    },
    {
      title:'身份证号',
      dataIndex: 'card_id',
      width:1
    },
    {
      title:'手机号码',
      dataIndex: 'p_phone',
      width:1
    },
    {
      title:'挂号科室',
      dataIndex: 'k_name',
      width:1
    },
    {
      title:'挂号类型',
      dataIndex: 'p_p_name',
      width:1
    },
    {
      title:'挂花费',
      dataIndex: 'p_registration_fee',
      width:1
    },
    {
      // 就诊状态
      title:'挂号状态',
      dataIndex: 'o_state',
      width:1
    },
    {
      title:'就诊日期',
      dataIndex: 'o_ask_date',
      width:1
    },
    // {
    //   title:'候诊时间',
    //   dataIndex: 'o_ask_date',
    //   width:1
    // },
    {
      title:'预约时间',
      dataIndex: 'appointment_date',
      width:1
    },
    {
      title:'操作',
      width:1,
      render(row){
        return (
          <>
            <Button
              type="primary"
              size="small"
              key="update"
              onClick={()=>{
                history.push(`/goods/update/${row._id}`)
              }}
            >
              修改
            </Button>
          </>
        )
      }
    }
  ];
  

  // 获取数据
  const getDataListApi = async (nowPage,seachData ={}) =>{
    // 网络请求数据
    const payload = {
      page: nowPage,
      pageSize,
      ...seachData
    };
    // 进行网络请求
    getDataList(payload).then((res)=>{
      const {code,newArr,msg,count} = res || {}
      // console.log('newArr',newArr)
      if(code) {
         return message.error(msg)
      }
      setDataSource(newArr);
      setCount(count);
      setPage(nowPage);
    });
  }

  // 根据患者姓名查询数据
  const onSearch = async (value) => {
    const payload = {
      name: value
    }
    // 进行网络请求
    getDataByName(payload).then((res)=>{
      const {code, data, msg} = res || {}
      if(code){
        return message.error(msg);
      }
      setDataSource(data);
      setCount(1);
      setPage(1)
    })

  }
  // 挂载
  useEffect(()=>{
    getDataListApi(1);
  },[])
  return (
    <>
    <Card title='预约挂号'
      key="r_id"
    >
      <Radio.Group
        onChange={({ target: { value } }) => {
          setSelectionType(value);
        }}
        value={selectionType}
      >
        <Radio value="all">全部</Radio>
        <Radio value="1">待就诊</Radio>
        <Radio value="2">已就诊</Radio>
        <Radio value="3">已取消</Radio>
      </Radio.Group>
      <Search
      placeholder="请输入患者姓名"
      allowClear
      enterButton="搜索"
      style={{
        width: 300,
        float: 'right'
      }}

      onSearch={onSearch}
    />

      <Divider />

      {/* table显示 */}
      <Table
        scroll={{y:"500px", x:"1200px"}}
        rowkey = "r_id"
        // 表头
        columns={columns}
        // 查询返回的数据
        dataSource={dataSoucre}
        // 去除table提供的默认分页
        pagination={false}
      ></Table>
      <Pagination
        simple
        current={page}
        pageSize={pageSize}
        total={count}
        onChange={(page,pageSize)=>{
          console.log("页面改变",page,pageSize);
          getDataListApi(page);
        }}
      />
    </Card>
    </>
  )
  
}
export default Registration;

